<!DOCTYPE html>
<html>
  <head>
    <style>
      #mac {
        position: absolute;
        left: 100px;
        opacity: 0;
      }
      #mac-title {
        position: absolute;
        top: 200px;
        left: 600px;
        opacity: 0;
      }
      #mac-subtitle {
        position: absolute;
        top: 250px;
        left: 600px;
        opacity: 0;
      }
      #purchase {
        position: absolute;
        top: 350px;
        color: #888;
        text-decoration: none;
        font: 14px "helvetica neue", arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <img
      id="mac-title"   src="http://images.apple.com/imac/images/overview_allinone_title20110426.png">
    <img id="mac-subtitle" src="http://images.apple.com/imac/images/overview_allinone_subhead20110426.png">
    <img id="mac" src="http://images.apple.com/imac/images/overview_allinone20110426.png">

    <a href="#" id="purchase">Purchase</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script src="../move.js"></script>
    <script>
      move.select = function(selector){
        return $(selector).get(0);
      };

      move('#mac')
        .duration(1000)
        .set('opacity', 1)
        .add('left', 500)
        .end();

      move('#mac-title')
        .sub('left', 400)
        .set('opacity', 1)
        .duration(1200)
        .delay(500)
        .end();

      var purchase = move('#purchase')
        .set('opacity', 1)
        .set('left', 200)
        .then()
          .set('color', '#00B7FF')
          .duration(1000)
          .pop();

      move('#mac-subtitle')
        .sub('left', 400)
        .set('opacity', 1)
        .duration(1200)
        .delay(500)
        .then(purchase)
        .end();
    </script>
  </body>
</html>
